<template>
	<view class="headerNav" :style="headerNavStyle">
		<!-- 背景 -->
		<view class="headerNav-bg">
			<view v-if="backgroundType == 1" :style="'background-color: ' + backgroundColor"></view>
			<image v-if="backgroundType == 2" :src="backgroundImage" mode=""></image>
		</view>

		<!-- 内容 -->
		<view class="headerNav-container" :style="headerContainerNavStyle">
			<!-- 返回按钮 -->
			<view v-if="backIconShow" class="headerNav-back-icon" @tap="headerGoBack">
				<text class="iconfont icon-fanhui" :style="'color: ' + backIconColor"></text>
			</view>
			<!-- 占位 -->
			<view v-if="backIconShow" style="width: 65rpx;height: 100%;"></view>

			<!-- 文本 -->
			<view v-if="type == 1" class="headerNav-title">{{title}}</view>
			<!-- 搜索框 -->
			<u-search v-if="type == 2" placeholder="请输入要搜索的内容" v-model="keyWord" :clearabled="false" :show-action="false"
				@search="search"></u-search>

			<!-- 占位 -->
			<view v-if="backIconShow && type == 1" style="width: 65rpx;height: 100%;"></view>
			<view v-if="type == 2" :style="headerContainerNavRightStyle"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 背景类型（1颜色、2图片）
			backgroundType: {
				type: String,
				default: "1",
			},
			// 背景颜色
			backgroundColor: {
				type: String,
				default: "#fff",
			},
			// 背景图片
			backgroundImage: {
				type: String,
			},
			// 是否显示返回icon
			backIconShow: {
				type: Boolean,
				default: true,
			},
			// 返回icon的颜色
			backIconColor: {
				type: String,
				default: "#333",
			},
			// 类型（1文本、2搜索框）
			type: {
				type: String,
				default: "1",
			},
			// 标题
			title: {
				type: String,
				default: "默认",
			},
		},
		data() {
			return {
				wxCapsule: null,
				headerNavStyle: "",
				headerNavHeight: 0,
				headerContainerNavStyle: "",
				headerContainerNavRightStyle: "",
				keyWord: "",
			}
		},
		methods: {
			/**
			 * @description 设置导航栏
			 */
			setHeaderNav() {
				this.keyWord = "";
				this.wxCapsule = uni.getMenuButtonBoundingClientRect();
				console.log("导航栏start");
				console.log(wxCapsule.value);
				console.log("导航栏end");

				this.headerNavStyle = `height: ${this.wxCapsule.bottom + 10}px;padding-bottom: 10px;`;
				this.headerNavHeight = this.wxCapsule.bottom + 10;
				this.headerContainerNavStyle =
					`width: 100%;height: ${this.wxCapsule.bottom - this.wxCapsule.top}px;`;
				this.headerContainerNavRightStyle =
					`width: ${this.wxCapsule.right - this.wxCapsule.left}px;height: ${this.wxCapsule.bottom - this.wxCapsule.top}px;`;
			},
			/**
			 * @description 返回上一级
			 */
			headerGoBack() {
				uni.navigateBack({
					delta: 1,
					fail: () => {
						uni.reLaunch({
							url: this.$store.getters.pagePath
						});
					}
				});
			},
			/**
			 * @description 搜索
			 */
			search(e) {
				this.$emit("search", e);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.headerNav {
		display: flex;
		align-items: flex-end;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		width: 100%;

		.headerNav-bg {
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			view {
				width: 100%;
				height: 100%;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.headerNav-container {
			display: flex;
			align-items: center;
			position: relative;
			z-index: 2;
			padding: 0 20rpx;

			.headerNav-back-icon {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 50%;
				left: 20rpx;
				transform: translateY(-50%);
				z-index: 2;
				width: 65rpx;
				height: 65rpx;
				border-radius: 50%;

				text {
					font-size: $XL-fs;
					font-weight: 600;
				}
			}

			.headerNav-title {
				flex: 1;
				height: 65rpx;
				line-height: 65rpx;
				font-size: $XL-fs;
				font-weight: 600;
				letter-spacing: 2rpx;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
</style>